<!doctype html>
<html ng-app="baseDirective">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../../build/common/base.css" rel="stylesheet">
    <script type="text/javascript" src="../../build/common/base.js"></script>
    <script type="text/javascript" src="../../build/common/ngEdit.js"></script>
    <script type="text/javascript">
        var controller = ['$scope', 'baseService', function (scope, baseService) {
            var instanceId, defId, taskId;
            try {
                instanceId = window.passData.instanceId;
                defId = window.passData.defId;
                taskId = window.passData.taskId;
            } catch (e) {
                instanceId = $.getParam('instanceId');
                defId = $.getParam('defId');
                taskId = $.getParam('taskId');
            }
            if (!taskId) {
                taskId = "";
            }
            //	scope.imageUrl =  __ctx + "/bpm/instance/flowImnageflowImage?instId=" + instanceId + "&defId=" + defId + "&taskId=" + taskId;
            $("#flowImnage").attr("src", __ctx + "/bpm/instance/flowImage?instId=" + instanceId + "&defId=" + defId + "&taskId=" + taskId);

            //$("#flowImnage").attr("src",);
            var defer = baseService.postForm(__ctx + "/bpm/instance/getInstanceAndChildren", {
                id: instanceId
            });
            $.getResultData(defer, function (data) {
                scope.bpmInstance = data.bpmInstance;
                scope.bpmInstanceChildren = data.bpmInstanceChildren;
            })

            scope.showImage = function (id, title) {
                var conf = {
                    title: title || "查看流程图",
                    url: "/bpm/instance/instanceImageDialog.html?openedFlag=true&instanceId=" + id
                        + "&taskId=" + taskId,
                    height: '95%',
                    width: '80%',
                    passData: null,
                    topOpen: false
                };
                conf.ok = function (index, innerWindow) {
                    $.Dialog.close(innerWindow);
                }
                $.Dialog.open(conf);
            }

            if ($.getParam('openedFlag')) {
                scope.canotOpen = true;
            }

            //获取流程节点坐标
            var defer1 = baseService.postForm(__ctx + "/bpm/instance/getFlowImageInfo", {
                instanceId: instanceId,
                defId: defId,
                taskId: taskId
            });
            $.getResultData(defer1, function (data) {
                scope.imageInfo = data;
                window.setTimeout(function () {
                    scope.initDialogs();
                }, 300)
            })
            scope.opinionConfig = {
                awaiting_check: { name: '待审批', color: "#ed4014", icon: "fa-spinner fa-pulse" },
                agree: { name: '同意', color: "#19be6b", icon: "fa-check-circle" },
                oppose: { name: '反对', color: "#ff9900", icon: "fa-close" },
                abandon: { name: '弃权', icon: "fa-unlink", color: "#808695" },
                reject: { name: '驳回', icon: "fa-reply", color: "#ff9900" },
                rejectToStart: { name: '驳回到发起人', icon: "fa-reply-all", color: "#ff9900" },
                revoke: { name: '撤销', icon: "fa-stop", color: "#ed4014" },
                recall: { name: '撤回', icon: "fa-reply", color: "#ff9900" },
                revoker_to_start: { name: '撤回到发起人', icon: "fa-reply-all", color: "#ff9900" },
                signPass: { name: '会签通过', icon: "fa-check-circle", color: "#3c763d" },
                signNotPass: { name: '会签不通过', icon: "fa-close", color: "#ed4014" },
                signRecycle: { name: '会签回收', icon: "fa-check-circle", color: "#3c763d" },
                skip: { name: '跳过执行', icon: "fa-arrow-circle-right", color: "#3c763d" },
                manualEnd: { name: '人工终止', icon: "fa-stop", color: "#ed4014" },
                cancelled: { name: '任务取消', icon: "fa-arrow-circle-right", color: "#808695" }
            }
            scope.initDialogs = function () {

                var setting = {
                    hide: {
                        event: 'mouseleave',
                        leave: false,
                        fixed: true,
                        delay: 100
                    },
                    style: {
                        classes: 'qtip-default  qtip qtip-bootstrap qtip-shadow'
                    }
                };

                for (let key in scope.imageInfo.opinionMap) {
                    setting.content = { text: $('#' + key) }

                    $('#node' + key).qtip(setting);
                }

            }
            scope.assignInfo = function (info) {
                if (!info) {
                    return "";
                }
                var msg = "";
                angular.forEach(info.split(","), function (item) {
                    if (!item) {
                        return;
                    }
                    if (msg) {
                        msg += "；";
                    }
                    var strs = item.split("-");
                    var typeName = "";
                    if (strs[0] === "user") {
                        typeName = "[用户]";
                    } else if (strs[0] === "role") {
                        typeName = "[角色]";
                    } else if (strs[0] === "group") {
                        typeName = "[组]";
                    } else if (strs[0] === "org") {
                        typeName = "[组织]";
                    } else if (strs[0] === "post") {
                        typeName = "[岗位]";
                        if (strs[2]) {
                            return msg += typeName + strs[1] + "-" + strs[2];
                        }
                    } else if (strs[0] === "job") {
                        typeName = "[职称]";
                    }
                    msg += typeName + strs[1];
                });
                return msg;
            };
            scope.getTimeLag = function (time) {
                return $.timeLag(time);
            }

        }];



        function isValidate() {
            $.Dialog.close(window);
            return false;
        }
    </script>
</head>

<body class="panel success" ng-controller="controller" style="overflow: auto;">
    <button ng-hide="canotOpen" class="btn btn-primary fa fa-image btn-xs" ng-if="bpmInstance.parentInstId"
        ng-click="showImage(bpmInstance.parentInstId)">查看父流程图</button>
    <button ng-hide="canotOpen" class="btn btn-primary fa fa-image btn-xs" ng-repeat="instance in bpmInstanceChildren"
        ng-click="showImage(instance.id,instance.subject+'流程图')">查看子流程 "{{instance.subject}}" 流程图</button>
    <br />

    <div style="top:5px">
        <img id="flowImnage">
        <div ng-repeat="(nodeId,layout) in imageInfo.nodeMap" id="node{{nodeId}}" class="flowNode"
            style="position:absolute;left:{{layout.x}}px;top:{{layout.y+20}}px;width:{{layout.width}}px;height:{{layout.height}}px;">
            <div ng-repeat="opinion in imageInfo.opinionMap[nodeId]"
                ng-show="$index ===imageInfo.opinionMap[nodeId].length-1">
                <div ng-if="opinionConfig[opinion.status]" class="opinionStatus"
                    style="color: {{opinionConfig[opinion.status].color}}">
                    <span class="fa {{opinionConfig[opinion.status].icon}}"></span>
                    {{opinionConfig[opinion.status].name}}
                </div>
            </div>
        </div>
    </div>
    <div style="display: none;">
        <div ng-repeat="(nodeId,layout) in imageInfo.nodeMap" id="{{nodeId}}">
            <div ng-repeat="opinion in imageInfo.opinionMap[nodeId]">
                <ul class="list-group">
                    <a class="list-group-item">
                        <h4 class="list-group-item-heading">{{opinion.approverName}} <span
                                style="margin-left: 10px;color: {{opinionConfig[opinion.status].color}}"><span
                                    class="fa {{opinionConfig[opinion.status].icon}}"></span>
                                {{opinionConfig[opinion.status].name}}</span></h4>
                        <p class="list-group-item-text" ng-if="opinion.status != 'awaiting_check'">
                            审批意见：{{opinion.opinion}} <br /> 操作时间：{{opinion.approveTime | date:"yyyy-MM-dd HH:mm:ss"}}
                            <br /> 任务耗时：{{getTimeLag(opinion.durMs)}}
                        </p>
                        <p class="list-group-item-text" ng-if="opinion.status == 'awaiting_check'">
                            任务后选人：{{assignInfo(opinion.assignInfo)}}
                            <br /> 创建时间：{{opinion.createTime | date:"yyyy-MM-dd HH:mm:ss"}}
                        </p>
                    </a>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
<style>
    .opinionStatus {
        margin-top: 6px;
        margin-left: 30px;
    }
</style>



<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>启动流程</title>
    <link rel="stylesheet" href="../../assets/js/common/element/index.css">
    <link href="../../build/common/base.css" rel="stylesheet">
    <script type="text/javascript" src="../../build/common/base.js"></script>
    <script type="text/javascript" src="../../build/common/vueEdit.js"></script>
    <script type="text/javascript" src="../../assets/vue/service/bpm/bpmService-vue.js"></script>
    <style media="print">
        .print-hidden {
            display: none
        }
    </style>
</head>

<body class="panel panel-default">
    <div id="startController">
        <div class="panel-heading print-hidden">
            <!-- <bpm-buttons :buttons="buttons" :ifagree="ifagree" :defname='defName'></bpm-buttons> -->
            <bpm-buttons :buttons="buttons" :ifagree="ifagree" :defname='defName' :defnames="defNames"></bpm-buttons>
        </div>
        <div v-if="form.type=='INNER'">
            <ab-custom-form></ab-custom-form>
        </div>
        <div v-if="form.type=='FRAME'">
            <ab-url-form :form="form"></ab-url-form>
        </div>
    </div>
</body>

</html>

<script type="text/javascript">
    var app = new Vue({
        el: '#startController',
        data: function () {
            return {
                defName: "",

                defNames: "",
                instance: "",
                form: "",
                buttons: "",
                task: "",
                flowRequestParam: {}, // 最终提交的数据
                configSpecified: {},	// 流程配置信息
                ifagree: {} //标准合同 付款条件 不同意不可提交
            }
        },
        created: function () {
            var thisVue = this;
            bpmService.init({
                defId: $.getParam("defId"),
                flowKey: $.getParam("defKey"),
                instanceId: $.getParam("instanceId")
            }, function (data) {

                //不同意就不让点提交 paymentterms standardcontract
                if (data.data.gysxxs != undefined) {
                    thisVue.ifagree = data.data.gysxxs.a_mainproduct
                }
                // thisVue.ifagree = data.data
                if (data.data.aCompanyInfo) {
                    thisVue.ifagree = data.data.aCompanyInfo
                }
                Vue.formService.initCustFormFu(data.form.formHtml, data);
                thisVue.form = data.form;
                thisVue.defName = data.defName;


                // thisVue.defNames = data.instance.defName;
                if (data.instance) {
                    thisVue.defNames = data.instance.defName;
                }
                thisVue.flowRequestParam = data.flowRequestParam;
                thisVue.configSpecified = data.configSpecified;
                thisVue.buttons = data.buttonList;
                thisVue.instance = data.instance;
            });
        },

    })
</script>